<template>
  <div class="Orders">
    <!-- 面包屑 -->
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/sportsShop' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>运动商城系统</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  

  <br>

  <!-- 删除批量选择的记录 -->
  <div style="position:relative; height: 30px;line-height:30px;">

    <div style="position:absolute;left:10px;top: 50%; transform: translateY(-50%);">
        <el-tag type="warning">
          <h2>提示：可批量选择进行删除</h2>
        </el-tag>
    </div>

    <div style="position:absolute;right:10px;top: 50%; transform: translateY(-50%);">
      <el-button type="success" plain @click="packageDelete()">删除选择记录</el-button>
    </div>
  </div>

  <br>
  
    <!-- 表格数据展示 -->
    <!-- <el-table :data="orders" stripe style="width: 100%"> -->
    <el-table :data="orders.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe style="width: 100%; max-height: 700px; overflow: scroll;"
      @selection-change="handleSelectionChange">

      <!-- 多选功能 -->
      <el-table-column type="selection" width="55">
      </el-table-column>

      <!-- 基本内容 -->
      <el-table-column prop="order_time" label="购买时间" width="170">
        <template v-slot="scope">
          {{ scope.row.order_time | dateFormat }}
        </template>
      </el-table-column>

      <el-table-column prop="username" label="用户名" width="100">
      </el-table-column>

      <el-table-column prop="goods_name" label="商品名称" width="170">
      </el-table-column>

      <el-table-column prop="goods_picture" label="商品图片" width="170">
        <template v-slot="scope">
          <img :src="scope.row.goods_picture" alt="" style="width:80px;height: 80px; border-radius: 8px;">
        </template>
      </el-table-column>


      <el-table-column prop="goods_price" label="商品单价" width="100">
      </el-table-column>


      <el-table-column prop="order_count" label="数量" width="100">
      </el-table-column>


      <el-table-column prop="order_amount" label="金额" width="100">
        <template v-slot="scope">
          <el-tag type="success">{{ scope.row.order_amount }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="says" label="评价" width="190">
        <template v-slot="scope">
          <el-tag>{{ scope.row.says }}</el-tag>
        </template>
      </el-table-column>


      <el-table-column prop="address" label="操作">
        <template v-slot="scope">
          <el-button type="warning" plain @click="removeOrderByOrderId(scope.row.order_id)">删除</el-button>
          <el-button type="primary" plain @click="readyForAlter(scope.$index)">评价</el-button>
        </template>
      </el-table-column>

    </el-table>
    <br>

    <!-- 分页 -->
    <div style="background-color:white; width: 100%; position: absolute; bottom: 30px;">
      <div class="block" >
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[2, 4, 6, 8, 10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="orders.length">
        </el-pagination>
      </div>
    </div>

    <br>

    <el-dialog title="修改评论" :visible.sync="centerDialogVisible" width="40%" center>

      <div>
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="params.says">
        </el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateOrderSays()">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>

export default {
  data() {
    return {
      // 订单数据
      orders: [
        {
          "goods_describe": "为发烧而生",
          "goods_id": 2,
          "goods_name": "小米12S Pro",
          "goods_picture": "http://localhost:8888/sports_shop_backend_war/users_picture/kzb68up.jpg",
          "goods_price": 4399,
          "order_amount": 4399,
          "order_count": 1,
          "order_id": 47,
          "order_time": 1670774400000,
          "says": "买家未做出评价",
          "user_id": 1,
          "username": "admin"
        },
        {
          "goods_describe": "为发烧而生",
          "goods_id": 5,
          "goods_name": "小米11 青春版",
          "goods_picture": "http://localhost:8888/sports_shop_backend_war/users_picture/kzb68up.jpg",
          "goods_price": 1799,
          "order_amount": 1799,
          "order_count": 1,
          "order_id": 48,
          "order_time": 1670774400000,
          "says": "买家未做出评价",
          "user_id": 1,
          "username": "admin"
        },
        {
          "goods_describe": "为发烧而生",
          "goods_id": 4,
          "goods_name": "小米12X",
          "goods_picture": "http://localhost:8888/sports_shop_backend_war/users_picture/kzb68up.jpg",
          "goods_price": 2699,
          "order_amount": 2699,
          "order_count": 1,
          "order_id": 49,
          "order_time": 1670774400000,
          "says": "买家未做出评价",
          "user_id": 1,
          "username": "admin"
        }
      ],

      // 当前页码
      currentPage: 1,
      // 当前选择的每页多少条数据，来自:page-size里面数组选择项变化，触发的handleSizeChange()
      pageSize: 4,

      // 多选
      multipleSelection: [],

      // 控制 修改评论对话框 的展示
      centerDialogVisible: false,

      // 用于渲染对话框数据，以及后期发起网络请求用
      params: {
        order_id: 0,
        says: "原评论信息获取失败",
        goods_id: 0,
        user_id: 0,
        username: "用户名获取失败"
      }
    }
  },
  mounted() {
    this.getOrdersByUserID()
  },
  methods: {
    // 获取用户相关的订单数据
    getOrdersByUserID() {
      this.$http({
        url: '/getOrdersByUserID',
        params: {
          //键值对
          user_id: window.sessionStorage.getItem('user_id')
        },
        method: 'post'
      }).then(res => {
        // 登录成功判断，以及保存token
        if (res.data.meta.status !== 200) {
          return this.$message.error('获取订单数据失败')
        } else {
          this.$message.success('获取订单数据成功')

          this.orders = res.data.data;

        }
      }).catch(res => {
        console.log(res);
      })
    },

    // 修改每页多少条数据
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },

    // 当前页编号
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

    // 多选功能
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val)
    },

    // 批量删除订单
    packageDelete() {
      for (var i = 0; i < this.multipleSelection.length; i++) {
        // this.removeOrderByOrderId(this.multipleSelection[i].order_id)
        this.deleteOrdersById (this.multipleSelection[i].order_id)
      }
    },

    // 单条删除订单
    removeOrderByOrderId(order_id) {
      // 在页面上删除
      // for (var i = 0; i < this.orders.length; i++) {
      //   if (this.orders[i].order_id == order_id) {
      //     // this.orders.splice(i, 1)
      //   }
      // }
      this.deleteOrdersById (order_id)
    },

    // 网络请求：通过id删除订单记录
    deleteOrdersById (_id) {
      this.$http({
        url: '/deleteOrdersById',
        params: {
          order_id: _id
        },
        method: 'post'
      }).then(res => {
        console.log(res)
        if (res.data.status !== 200) {
          return this.$message.error('删除订单记录失败')
        } else {
          this.$message.success('删除订单记录成功')
          // 重新加载订单数据
          this.getOrdersByUserID()
        }
      }).catch(res => {
        console.log(res);
      })
    },

    // 删除订单的网络请求

    // 删除操作的预处理
    readyForAlter(index) {
      // order_id --获取
      // says --- 弹窗组件 手动输入
      // goods_id --获取
      // user_id  --sessionStorage
      // username --sessionStorage

      // 1、利用index 修改params参数
      this.params.order_id = this.orders[index].order_id;
      this.params.says = this.orders[index].says;
      this.params.goods_id = this.orders[index].goods_id;
      this.params.user_id = window.sessionStorage.getItem('user_id');
      this.params.username = window.sessionStorage.getItem('username');
      // 2、启用对话框
      this.centerDialogVisible = true
    },

    // 专注 评论修改请求
    updateOrderSays() {
      var _this = this;
      this.$http({
        url: '/updateOrderSays',
        params: _this.params,
        method: 'post'
      }).then(res => {
        // console.log(res) data.status
        // 登录成功判断，以及保存token  
        if (res.data.status !== 200) {
          return this.$message.error('修改评论失败')
        } else {
          this.$message.success('修改评论成功')
          this.centerDialogVisible = false
          this.getOrdersByUserID()
        }
      }).catch(res => {
        console.log(res);
      })
    },
  }
}
</script>

<style>

</style>